var menu = document.querySelector('.menu');
//菜单导航栏
var left_nav1 = document.querySelector('.nav1');
var left_nav2 = document.querySelector('.nav2');
//获取html的宽度
var html = document.querySelector('html');
var htmlwidth = html.offsetWidth;

/*顶部导航栏的li */
var nav3 = document.querySelector('.nav3');
var nav3_li = nav3.querySelectorAll('.nav3-li');
console.log(nav3_li);
//顶部导航栏的下拉列表的大盒子
var menu_wrapper = document.querySelector('.menu_wrapper');
//顶部各个li对应的下拉
var menu_ul = document.querySelectorAll('.menu_ul');
//顶部li的文字设置
var s = nav3.querySelectorAll('span');
//logo图片的设置
var static = document.querySelector('.static');
var hover = document.querySelector('.hover');
//中间美图简介盒子
var banner_box1 = document.querySelector('.banner-box1');
//美图简介文化团队
var banner_box1_div = banner_box1.querySelectorAll('li');
var banner_back_box=document.querySelectorAll('.banner-box1-back');
//面向用户盒子
var banner_nav_li=document.querySelectorAll('.banner-nav-li');
//顶部导航栏鼠标移入事件
var banner_wrapper=document.querySelectorAll('.banner-wrapper');
console.log(banner_wrapper);
var click = function () {
    //获取html的宽度
    var html = document.querySelector('html');
    var htmlwidth = html.offsetWidth;
    var index = 0;
    //当屏幕增加到1020时
    if (htmlwidth >= 1036) {
        //顶部logo图标
        static.style.display = 'block';
        for (var i = 0; i < s.length; i++) {
            //字体颜色
            s[i].style.color = 'white';
        }
        //当html的宽度达到1015px时才鼠标移入事件才生效
        for (var i = 0; i < 7; i++) {
            //建立相同的自定义属性
            nav3_li[i].index = i;
            menu_ul[i].index = i;
            s[i].index = i;
            if (htmlwidth > 1036) {
                //顶部导航栏li的鼠标移入事件
                nav3_li[i].addEventListener('mouseover', function () {
                    menu_ul[this.index].style.display = 'block';
                    menu_wrapper.style.backgroundColor = "white";
                    static.style.display = "none";
                    hover.style.display = "block";
                    nav3_li[this.index].style.borderBottom = " 0.04rem solid #F63267 ";
                    for (var i = 0; i < s.length; i++) {
                        s[i].style.color = "black";
                    }
                })
             //li鼠标移入出现的下拉盒子的移入事件
                menu_ul[i].addEventListener('mouseover',function()
                {
                    console.log(9);
                    menu_wrapper.style.backgroundColor = "white";
                    menu_ul[this.index].style.display='block';
                    nav3_li[this.index].style.borderBottom=' 0.04rem solid #F63267 ';
                    for(var i=0;i<s.length;i++)
                    {
                        s[i].style.color='black';
                    }
                    hover.style.display='block';
                    static.style.display='none';
                })
               //下拉列表的大盒子鼠标移出事件
                menu_wrapper.addEventListener('mouseout',function()
                {
                    for(var i=0;i<s.length;i++)
                    {
                        s[i].style.color='white';
                    }
                    for(var i=0;i<menu_ul.length;i++)
                    {
                        menu_ul[i].style.display='none';
                        nav3_li[i].style.borderBottom='';
                    }
                   menu_wrapper.style.backgroundColor='';
                   hover.style.display='none';
                   static.style.display='block';
                })
              
            }
        }
    }
    //当屏幕缩小到1020后
    else {
       for(var i=0;i<s.length;i++)
       {
           s[i].style.color='block';
       }
        for (var i = 0; i < nav3_li.length; i++) {
        nav3_li[i].index = i;
        menu_ul[i].index = i;
            //设置鼠标未移入时li文字的样式和下划线
            nav3_li[i].style.borderBottom = '';
            s[i].style.color = 'black';
            nav3_li[i].addEventListener('mouseover', function () {
                menu_ul[this.index].style.display = 'none';
                menu_wrapper.style.backgroundColor = "";
                static.style.display = "block";
                hover.style.display = "none";
                for (var i = 0; i < nav3_li.length; i++) {
                    nav3_li[i].style.borderBottom = '';
                }
            })
            nav3_li[i].addEventListener('mouseout', function () {
                menu_ul[this.index].style.display = 'none';
                menu_wrapper.style.backgroundColor = "";
                static.style.display = "block";
                hover.style.display = "none";
                for (var i = 0; i < nav3_li.length; i++) {
                    s[i].style.color = 'black';
                }
            })
            //菜单下拉单下拉列表的大盒子鼠标移出
            menu_wrapper.addEventListener('mouseout',function()
            {
                for(var i=0;i<s.length;i++)
                {
                    s[i].style.color='black';
                }
            })
            //菜单下拉单下拉列表鼠标移入事件
            menu_wrapper.addEventListener('mouseover',function()
            {
               
                for(var i=0;i<s.length;i++)
                {
                    s[i].style.color="black";
                }

            })
        }
    }
}

window.addEventListener('load', function () {
    menu.style.display = 'none';
    left_nav1.addEventListener('click', function () {
        menu.style.display = 'block';
    })
    left_nav2.addEventListener('click', function () {
        menu.style.display = 'none';

    })

    if (htmlwidth > 1020) {
        console.log(htmlwidth);
        menu.style.display = 'block';
    }
    else {
        menu.style.display = 'none';

    }
    // change();
    click();
    //美图简介鼠标移入时出现的黑色阴影
    var index=0;
    for(var i=0;i<banner_box1_div.length;i++)
    {
        banner_back_box[i].index=i;
        banner_box1_div[i].index=i;
        banner_box1_div[i].addEventListener('mouseover',function()
        {   
            //跟当前点击的盒子的自定义索引号相同
            banner_back_box[this.index].style.display='block';
        })
        banner_box1_div[i].addEventListener('mouseout',function()
        {
            banner_back_box[this.index].style.display='none';
        })
    }
//面向用户的盒子的点击事件
for(var i=0;i<banner_nav_li.length;i++)
{
    banner_nav_li[i].index=i;
    console.log(banner_wrapper);
    banner_wrapper[i].index=i;
    banner_nav_li[0].style.borderBottom=" 0.04rem solid #F63267"
    
    banner_nav_li[i].addEventListener('click',function()
    {       
        //排他思想，只有点击的那个盒子才出现底边框，其他盒子的边框为空
        for(var i=0;i<banner_nav_li.length;i++)
        {
            banner_nav_li[i].style.borderBottom='';
        }
        banner_nav_li[this.index].style.borderBottom=' 0.04rem solid #F63267';
       for(var i=0;i<banner_wrapper.length;i++)
       {
           banner_wrapper[i].style.display='none';
       }
        banner_wrapper[this.index].style.display='block';
        
    })
}
var htmlheight=html.scrollHeight;
console.log(htmlheight);
})


/*自适应函数*/
var change = function () {
    var html = document.querySelector('html');
    var htmlwidth = html.offsetWidth;
    console.log(htmlwidth);
    html.style.fontSize = htmlwidth / 1536 * 100 + 'px';


}
/*屏幕改变的窗口函数 */
window.addEventListener('resize', function () {
    var html = document.querySelector('html');
    var htmlwidth = html.offsetWidth;
    // if(htmlwidth>=500)
    // {
    //     change();
    // }
    click();
    //解决当点击时隐藏menu盒子，屏幕改变menu不显示
    if (htmlwidth > 1036) {
        menu.style.display = 'block';
    }
    else {
        menu.style.display = 'none';
    }

})